@layout("/common/default.html",{title:'添加',libs:['form']}){
  <form class="layui-form"  lay-filter="layui-form-role" id="layui-form-role">
    <!--form表单-->
    <input type="hidden" id="onlyid" name="id" value="${role.id}">
    <input type="hidden" id="op" name="op" value="${role.op}">
  <div class="layui-fluid">
    <div class="layui-card">
      <div class="layui-card-header">基本信息</div>
      <div class="layui-card-body">
        <div class="layui-form-item layui-row">

          <div class="layui-inline layui-col-md9">
            <label class="layui-form-label layui-required">角色名称</label>
            <div class="layui-input-block">
              <input type="text" id="name" name="name" value="${role.name!}" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" lay-verify="required" required="">
            </div>
          </div>

          <div class="layui-inline layui-col-md9" >
            <label class="layui-form-label" >是否启用</label>
            <div class="layui-input-block">
              <input type="radio" name="useable" value="0" title="是" lay-filter="menuFlag" checked><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>是</div></div>
              <input type="radio" name="useable" value="1" title="否" lay-filter="menuFlag"><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>否</div></div>
            </div>
          </div>
          <div class="layui-inline layui-col-md9">
            <label class="layui-form-label">菜单权限</label>
            <div class="layui-card-body">
              <input type="hidden" name="menuIds" id="menuIds">
              <ul id="treeMenu" class="ztree" style="padding: 28px;"></ul>
            </div>
          </div>

        </div>

      </div>

    </div>

  </div>

    <div class="form-group-bottom" style="z-index: 200" align="center">
      <button class="layui-btn" lay-filter="btnSubmit" lay-submit>&emsp;提交&emsp;</button>
      <button   id="btnclose" class="layui-btn layui-btn-primary"  >&emsp;取消&emsp;</button>
    </div>
  </form>

<!--js逻辑-->

<script>

  layui.use(['form', 'submitform','customTree','treeSelect'], function () {
    var $ = layui.$,
            form = layui.form,
            treeSelect = layui.treeSelect,
            submitform = layui.submitform,
            customTree = layui.customTree;


    //为表单付出始值
    form.val('layui-form-role', {
      "useable":'${role.useable}',
    });

    var ids = '${role.menuIds}';

//为表单赋值
    var zTreeObj=customTree.render({
        elem: '#treeMenu',
        url: '/sys/menu/treeData',
        rootId: '0',
        check:'true',
        value: '${role.menuIds}'
      });
      //数据
     /* var setting = {
        check: {
          enable: true,//显示复选或单选框
          chkStyle: "checkbox" //显示样式为单选
        },
        async: {
          enable: true,
          url: "/sys/menu/treeData",
          type: "GET"
        },
        data: {
          simpleData: {
            enable: true,
            idKey: "id",
            pIdKey: "pId",
            rootPId: 0
          }
        },
        callback: {
          onClick: function (event, treeId, treeNode) {
            zTreeObj.checkNode(treeNode, !treeNode.checked, true);
          },
          onAsyncSuccess: function (event, treeId, treeNode) {
            let currZtree = zTree.getZTreeObj(treeId);
            let nodeList = currZtree.getNodes();
            currZtree.expandNode(nodeList[0], true);
            ids.forEach(function (item) {
              let node = zTreeObj.getNodeByParam("id", item, null);
              try {
                node.checked = true;
                zTreeObj.updateNode(node);
              } catch (err) {
              }
            });
          }
        }
      };

      zTreeObj = zTree.init($("#treeDemo"), setting);*/
    /*zTreeObj=result*/


    form.on("submit(btnSubmit)", function (data) {
      let nodes = zTreeObj.getCheckedNodes(true);
      let field = data.field;
      for (let i = 0; i < nodes.length; i++) {
        field['menuList[' + i + ']'] = nodes[i].id
      }

      // 请求后台
      submitform.form('/sys/role/save',field);

      return false;
    });

  });
</script>

@}
